<template>
    <div class="login-container">
        <div class="login-box">
            <div class="login">
                系&nbsp;统&nbsp;登&nbsp;录
            </div>
            <el-form ref="fromRef" style="max-width: 400px" :model="user" label-width="auto" class="form-data"
                :rules="rules">
                <el-form-item prop="account">
                    <el-input v-model="user.account" laceholder="Please input" placeholder="请输入用户名" class="input">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <UserFilled color="#c0c4cc" />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="user.password" type="password" placeholder="请输入密码" show-password class="input">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <el-icon>
                                    <Lock color="#c0c4cc" />
                                </el-icon>
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="login-button" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { checkLogin } from '@/api/users'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore();

//ref属性获取dom节点 定义一个变量
const fromRef = ref(null);

// 自定义校验账号
const validateAccount = (rule, value, callback) => {
    //rule: 校验规则 value:校验的值 callback:回调函数
    if (value) {
        callback()
    } else {
        callback(new Error('请输入账号'))
    }
}

//自定义校验密码
const validatePassword = (rule, value, callback) => {
    if (value) {
        callback()
    } else {
        callback(new Error('请输入密码'))
    }
}

// 表单校验
const rules = reactive({
    //自定义校验规则 validator validateAccount:校验函数
    //几个对象就有几个校验规则
    account: [
        { validator: validateAccount, trigger: 'blur' }
    ],
    //密码的校验规则
    password: [
        { validator: validatePassword, trigger: 'blur' }
    ]
})

//表单数据
const user = reactive({
    account: '',
    password: ''
})
const router = useRouter();

//登录请求
const login =  () => {
    //登录校验 validate:校验fromRef表单的校验规则 通过校验res为true 否则为false
    fromRef.value.validate( async (res) => {
        if (res) {
            //校验通过 发起登录请求
            //登录请求
            const { code, msg,id,role,token } = await checkLogin(user);
            if (code === 0) {
                ElMessage.success(msg);
                router.push('/home');
                sessionStorage.setItem('user',JSON.stringify({id,role,token}));
            } else {
                ElMessage.error(msg);
            }
        } 
    });

}

</script>

<style scoped>
.login-container {

    width: 100%;
    height: 100%;
    background-color: #2d3a4b;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-box {
    position: relative;
}

.login {
    color: white;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    width: 400px;
    height: 50px;
}

.form-data {
    text-align: center;
}

.input {
    width: 400px;
    margin-top: 20px;
    margin-bottom: 22px;
}

.input:nth-child(1) {
    margin-top: 0;
}

.login-button {
    width: 400px;
    /* margin-top: 20px; */
}

:deep(.el-input__wrapper) {
    background-color: rgba(0, 0, 0, 0);
}

:deep(.el-input__inner) {
    color: #fff;

}

:deep(.el-form-item) {
    font-size: 12px;
}

:deep(.el-form-item__error) {
    top: 35px;
}
</style>